<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户信息管理</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element/index.js"></script>
		<!-- 引入elementui的css样式 -->
		<link rel="stylesheet" href="../../css/index.css" />
		<!-- 引入网络请求库axios -->
		<script src="../../js/axios.min.js"></script>
		<!-- 引入qs，处理参数问题，将参数序列化 -->
		<script src="../../js/qs.min.js"></script>
		<style>
		  .avatar-uploader .el-upload {
		    border: 1px dashed #d9d9d9;
		    border-radius: 6px;
		    cursor: pointer;
		    position: relative;
		    overflow: hidden;
		  }
		  .avatar-uploader .el-upload:hover {
		    border-color: #409EFF;
		  }
		  .avatar-uploader-icon {
		    font-size: 28px;
		    color: #8c939d;
		    width: 178px;
		    height: 178px;
		    line-height: 178px;
		    text-align: center;
		  }
		  .avatar {
		    width: 178px;
		    height: 178px;
		    display: block;
		  }
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 条件搜索 -->
			<el-form :inline="true" :model="userInfo" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="userInfo.useraddress" placeholder="请输入地址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selectUserInfo()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addUserInfo">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="clearUserInfo">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 条件搜索结束 -->
			<!-- 信息展示表格 -->
			<el-table ref="multipleTable" :data="userinfoes" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" width="50" label="#">
				</el-table-column>
				<el-table-column prop="username" label="用户名" width="120">
				</el-table-column>
				<el-table-column prop="userpwd" label="密码" width="120">
				</el-table-column>
				<el-table-column prop="usertel" label="电话" width="120">
				</el-table-column>
				<el-table-column prop="useraddress" label="地址" show-overflow-tooltip>
				</el-table-column>
				<el-table-column  label="用户头像" width="150">
					<template slot-scope="scope">
						<img :src="scope.row.imgsrc"  class="avatar">
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateUserInfo(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
				<!--  <div style="margin-top: 20px">
			    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
			    <el-button @click="toggleSelection()">取消选择</el-button>
			  </div> -->
			</el-table>
			<!-- 显示用户信息表格结束 -->
			<!--分页功能开始 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageNum" :page-sizes="[2, 3, 5, 10]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<!-- 分页结束 -->

			<!-- 点击新增/编辑弹出来的对话框 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible">
				<el-form :model="eidtUserInfo">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="eidtUserInfo.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="eidtUserInfo.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" :label-width="formLabelWidth">
						<el-input v-model="eidtUserInfo.useraddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="eidtUserInfo.usertel" autocomplete="off"></el-input>
					</el-form-item>
					
					<el-form-item label="个人头像" :label-width="formLabelWidth">
						<el-upload class="avatar-uploader" 
							action="#" 
							:show-file-list="false"
							:http-request="uploadImg" 
							:before-upload="beforeAvatarUpload"
							>
							<img v-if="eidtUserInfo.imgsrc" :src="eidtUserInfo.imgsrc" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveUserInfo">确 定</el-button>
				</div>
			</el-dialog>
			<!-- dialog结束 -->
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data(){
				return{
				// 条件搜索数据对象
				userInfo: {
					username: "",
					useraddress: ""
				},
				// 保存数据列表信息数据
				userinfoes: [],
				// 控制diglog框显示隐藏属性
				dialogFormVisible: false,
				// 保存新增/修改用户信息数据
				eidtUserInfo: {
					// id用户判断是新增还是编辑
					id: "",
					imgsrc:"",
					username: "",
					userpwd: "",
					useraddress: "",
					usertel: "",
					
				},
				// 控制dialog框中表单的宽度
				formLabelWidth: '120px',
				// 分页相关
				// 当前页码
				pageNum: 1,
				// 每页显示条数
				pageSize: 5,
				// 总条数
				total: 0

			}
			},
			mounted() {
				// 页面加载完成后调用查询方法
				this.selectUserInfo()
			},
			methods: {
				// 查询方法
				selectUserInfo: function(currentPage, currentSize) {
					// 若第一次调用，参数没有传递
					if (!currentPage) {
						currentPage = this.pageNum
					}
					if (!currentSize) {
						currentSize = this.pageSize
					}
					var that = this
					// 参数序列化处理
					var params = Qs.stringify(this.userInfo)
					// 请求参数的拼接
					params += "&pageNum=" + currentPage + "&pageSize=" + currentSize
					// 发送请求
					axios.post("http://localhost:8086/ngd_springboot20221014/getUserInfoes", params).
					then(function(response) {
						// 将查询到的数据结果赋值给列表数据对象，回显数据
						that.userinfoes = response.data.list
						console.log(response)
						that.total = response.data.total
						that.pageNum = response.data.pageNum
						that.pageSize = response.data.pageSize
					}).
					catch(function(err) {

					})
				},
				addUserInfo: function() {
					// 点击新增后，将表单内的数据清空
					this.eidtUserInfo = {
						// id用户判断是新增还是编辑
						id: "",
						username: "",
						userpwd: "",
						useraddress: "",
						usertel: "",
						imgsrc:""
						
					}
					// 显示对话框
					this.dialogFormVisible = true
				},
				clearUserInfo: function() {
					// 将表单数据清空
					this.userInfo = {
						username: "",
						useraddress: ""
					}
					// 调用查询操作
					this.selectUserInfo()

				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				// 保存方法
				saveUserInfo: function() {
					var that = this
					var params = Qs.stringify(this.eidtUserInfo)
					console.log(this.eidtUserInfo)
					// 请求接口，用户存储用户信息
					axios.post("http://localhost:8086/ngd_springboot20221014/editUserInfo", params).
					then(function(response) {
						console.log(response)
						// 新增完成后，关掉对话框
						that.dialogFormVisible = false
						// 重新查询
						that.selectUserInfo()
					}).
					catch(function(err) {

					})

				},
				// 修改方法
				updateUserInfo: function(info) {
					this.dialogFormVisible = true
					console.log(info)
					this.eidtUserInfo = info
				},
				deleteUserInfo: function(userid) {
					console.log(userid)
					var that = this
					// 询问是否确认删除
					this.$confirm('此操作将永久删除该条用户信息, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// 点击确认后
						// 请求接口，用户存储用户信息
						axios.post("http://localhost:8086/ngd_springboot20221014/deleteUserInfoById", Qs
							.stringify({
								"id": userid
							})).
						then(function(response) {
							console.log(response)

							// 重新查询
							that.selectUserInfo()
						}).
						catch(function(err) {

						})
						// 提示删除成功
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				// 分页相关的
				// 当改变每页显示的数据条数的时候会触发的方法
				handleSizeChange(val) {
					this.selectUserInfo(this.pageNum, val)
				},
				// 当改变当前页码的时候会触发的方法
				handleCurrentChange(val) {
					this.selectUserInfo(val, this.pageSize)
				},
				// 图片上传前的校验
				// beforeAvatarUpload(file) {
				// 	 // 验证文件类型
				// 	                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
				// 	                var extension = testmsg === 'jpg' || testmsg === 'png' || testmsg === 'gif'
				// 	                if (!extension) {
				// 	                    this.$message({
				// 	                        message: '上传文件只能是jpg/png/gif格式!',
				// 	                        duration: 1000,
				// 	                        showClose: true,
				// 	                        type: 'warning'
				// 	                    })
				// 	                }
				// 	                return extension
				// },
				// 图片上传前的校验
				 beforeAvatarUpload(file) {
					 console.log(file.type)
				        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/jpg'||file.type === 'image/gif';
				        const isLt2M = file.size / 1024 / 1024 < 2;
				
				        if (!isJPG) {
				          this.$message.error('上传头像图片只能是 JPG ,png,gif格式!');
				        }
				        if (!isLt2M) {
				          this.$message.error('上传头像图片大小不能超过 2MB!');
				        }
				        return isJPG && isLt2M;
				      },																
				// 图片上传时触发
				 uploadImg:function(param, type){
					
					var that=this
					// 文件上传方法，会将文件对象作为参数传递进来
					var formData = new FormData()
					formData.append('image', param.file);
					axios.post('http://localhost:8086/ngd_springboot20221014/upload', formData)
					.then(function (res) {
						that.eidtUserInfo.imgsrc=res.data	
					
                });
				
            }
			
			}
		})
	</script>
</html>
